import { Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { getChannelApi } from 'api/channel';

const { Option } = Select;

export default function Channel(props) {
  // console.log('props :>> ', props);
  //声明数据保存channel
  const [channels, setChannels] = useState([]);
  // 发送请求获取channels
  const getChannels = async () => {
    const res = await getChannelApi();
    // console.log(res);
    setChannels(res.channels);
  };
  //挂载后的钩子
  useEffect(() => {
    getChannels();
  }, []);
  return (
    <div>
      {/* 回传props给Select组件 */}
      <Select
        style={{ width: 200 }}
        placeholder="请选择频道"
        {...props}
        allowClear
      >
        {channels.map((item) => (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
    </div>
  );
}
